<template>
  <div class="ItemView" v-show="contentShow">
    <div v-for="item in searchContent.data" :key="item.id">
      <!-- 这一块因为数据有不同类型的 所以只能做if判断里面有没有这个类型 有就渲染 没有就不渲染 -->

      <!-- 作者 -->
      <div
        @click="GoAuthorPageView(item)"
        class="author-box"
        v-if="item.data_type == 'author'"
      >
        <img v-lazy="item.icon" alt="" />
        <div class="author-right">
          <p>{{ item.title }}</p>
          <p>{{ item.share_desc }}</p>
          <p>热门节目:{{ item.subtitle }}</p>
        </div>
      </div>

      <!-- 节目 -->
      <div
        @click="GetProgramId(item.id)"
        ref=""
        class="Program-box"
        v-if="item.data_type == 'content'"
      >
        <img v-lazy="item.icon" alt="" />
        <div class="Program-right">
          <van-divider
            :style="{ borderColor: '#ccc' }"
            class="Program-right-top"
            content-position="left"
            >{{ item.author }}</van-divider
          >
          <p>{{ item.title }}</p>
          <p>{{ item.share_desc }}</p>
          <!-- 判断节目类型 -->
          <p class="Program-free" v-if="item.type == 'free'">免费节目</p>
          <!-- 判断会员免费 -->
          <div
            class="Program-vip-free"
            v-if="item.type == 'charge' && item.is_vip_only == '0'"
          >
            ￥{{ item.price }}
            <span>会员免费</span>
          </div>
          <!-- 判断会员专享 -->
          <div
            class="Program-vip-only"
            v-if="item.type == 'charge' && item.is_vip_only == '1'"
          >
            会员专享
          </div>
        </div>
      </div>

      <!-- 单集 -->
      <div
        @click="GoSingleSetView(item.id)"
        class="article-box"
        v-if="item.data_type == 'article'"
      >
        <div class="img-box">
          <img v-lazy="item.icon" alt="" />
        </div>

        <div class="Text-box">
          <p>
            {{ item.title }}
          </p>
          <p>{{ item.share_desc }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { searchNew } from "@/api/request";
export default {
  name: "ItemView",
  data() {
    return {
      // 传过来的参数用来请求
      click_type: "",
      itemId: "",
      itemName: "",
      // 请求到的内容数据
      searchContent: [],
      // 控制内容模块显示还是隐藏
      contentShow: true,
    };
  },
  created() {
    // 获取路由参数
    let data = this.$route.query;
    this.click_type = data.click_type;
    this.itemId = data.itemId;
    this.itemName = data.itemName;
    // console.log(this.$route);

    // 监测接收传过来的布尔值
    this.$bus.$on("contentShow", (data) => {
      console.log("我收到了", data);
      this.contentShow = data;
    });

    // 请求内容数据
    searchNew({
      data_id: this.itemId,
      is_correct: 1,
      page: 1,
      click_type: this.click_type,
      keyword: this.itemName,
    }).then(({ data }) => {
      this.searchContent = data.data;
      // console.log("搜索请求", this.searchContent);
    });
  },
  methods: {
    // 点击跳转到节目详情并且传递id
    GetProgramId(id) {
      console.log(id);
      this.$router.push({
        path: "/BookDetails",
        query: {
          id,
        },
      });
    },

    // 单集跳转
    GoSingleSetView(article_id) {
      console.log(article_id);
      this.$router.push({
        path: "/SingleSetView",
        query: {
          article_id,
        },
      });
    },

    // 作者页跳转
    GoAuthorPageView(item) {
      // authorId  id
      console.log(item);
      this.$router.push({
        path: "/AuthorPageView",
        query: {
          authorId: item.id,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.ItemView {
  min-height: 100vh;
  max-width: 100vw;
  padding: 0rem 0.875rem 3.125rem;
  box-sizing: border-box;
  position: absolute;
  top: 2.5rem;
  left: 0;
  z-index: 1;
  background-color: #fbfbfb;
  .author-box {
    padding: 0.625rem;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    img {
      width: 3.75rem;
      height: 3.75rem;
      border-radius: 50%;
    }
    .author-right {
      margin-left: 0.625rem;
      font-size: 0.75rem;
      p {
        color: var(--fontcolor);
        margin: 0.25rem 0;
      }
      p:nth-child(1) {
        color: #cebc8c;
        font-size: 0.875rem;
      }
    }
  }
  .Program-box {
    display: flex;
    align-items: center;
    margin: 1rem 0;
    img {
      width: 5.625rem;
      height: 7.5rem;
    }
    // 右边
    .Program-right {
      width: 100%;
      margin-left: 0.625rem;
      .Program-right-top {
        font-size: 0.75rem;
        color: #cebc8c;
        margin: 0 0;
      }
      p {
        margin: 0.375rem 0;
      }
      p:nth-child(2) {
        font-size: 0.875rem;
      }
      p:nth-child(3) {
        font-size: 0.75rem;
        color: var(--fontcolor);
        margin: 0 0 2.5rem 0;
      }
      // 免费节目
      .Program-free {
        font-size: 0.875rem;
        color: #ce7a43;
      }
      // 会员免费
      .Program-vip-free {
        font-size: 0.75rem;
        color: #ce7a43;
        span {
          font-size: 0.75rem;
          color: #cebc8c;
          background-color: #faf6de;
          padding: 0.25rem;
        }
      }
      // 会员专享
      .Program-vip-only {
        font-size: 0.875rem;
        color: #ce7a43;
      }
    }
  }
  // 单集
  .article-box {
    display: flex;
    align-items: center;
    margin: 1.25rem 0;
    .img-box {
      position: relative;
      img {
        width: 4.375rem;
        height: 5rem;
        display: inline-block;
      }
      &::after {
        content: "";
        display: inline-block;
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: black;
        opacity: 0.4;
        top: 0;
        left: 0;
      }
      &::before {
        content: "";
        display: inline-block;
        width: 0px;
        height: 0px;
        border: 12px solid transparent;
        border-left: 18px solid white;
        position: absolute;
        top: 50%;
        left: 60%;
        transform: translateY(-50%) translateX(-50%);

        z-index: 99;
      }
    }

    .Text-box {
      margin-left: 0.625rem;
      p:nth-child(1) {
        font-size: 0.8125rem;
      }
      p:nth-child(2) {
        font-size: 0.75rem;
        color: var(--fontcolor);
        margin: 0.5rem 0;
      }
    }
  }
}
</style>